import React from 'react';
import { Modal, Form, Input, Checkbox, Select } from 'antd';
import {
  MESSAGETYPE,
  SENDTOPHONE
} from 'configs/constants';
import { 
  AutoSearchMult
 } from 'components/common';
import { 
  isEmpty,
  OTOKEY
 } from 'utils/share';
 import { 
  getList as getUList
 } from 'services/user';
 import { 
  getList as getCList
 } from 'services/company';

const FormItem = Form.Item;
const Option = Select.Option;
const { TextArea } = Input;

const TYPEKEY = OTOKEY(MESSAGETYPE);
const SENDKEY = OTOKEY(SENDTOPHONE);

class AddModal extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      type: '' // 发送消息类型
    };
    this.onOK = this.onOK.bind(this);
  }

  componentDidMount(){
    const { getUser, record } = this.props;
    record.id && getUser({ name: record.name });
  }

  onOK () {
    const { onOK, form, onCancel, record, getList } = this.props;
    form.validateFields((err, values) => {
      if (!err) {
        values.sendToPhone = values.sendToPhone ? SENDKEY.YES : SENDKEY.NO;
        onOK({ ...values, id: record.id }).then(() => {
          onCancel();
          getList();
        });
      }
    });
  }

  render () {
    const { 
      onCancel, 
      form,
      loading, 
      record = {},
      details = {},
      userList,
      companyList,
      getUserList,
      getCompanyList
   } = this.props;
    const { type } = this.state;
    const { getFieldDecorator } = form;
    const modalOpts = {
      confirmLoading: loading,
      title: `${record.id ? '编辑' : '新增'}消息`,
      width: 500,
      visible: true,
      maskClosable: false,
      okText: '确定',
      cancelText: '取消',
      onOk: this.onOK,
      onCancel
    };
    const formItemLayout = {
      labelCol: {
        span: 6
      },
      wrapperCol: {
        span: 16
      }
    };
    const userProps = {
      preSearch: true,
      placeholder: '请选择用户',
      preFetchList: getUserList,
      dataSource: userList,
      fetchList: getUList,
      result: data => data.data.data,
      searchKey: 'name',
      keys: ['name']
    };
    const companyProps = {
      preSearch: true,
      placeholder: '请选择公司名称',
      preFetchList: getCompanyList,
      dataSource: companyList,
      fetchList: getCList,
      result: data => data.data.data,
      searchKey: 'name',
      keys: ['name']
    };
    return (
      <Modal {...modalOpts}>
        <Form>
          <FormItem
            label='标题'
            {...formItemLayout}
          >
            {
              getFieldDecorator('title', {
                initialValue: details.title || '',
                rules: [{ required: true, message: '请填写标题' }]
              })(
                <Input
                  maxLength={30}
                  placeholder='标题'
                />
              )
            }
          </FormItem>
          <FormItem
            label='短信'
            {...formItemLayout}
          >
            {
              getFieldDecorator('sendToPhone', {
                initialValue: details.sendToPhone || ''
              })(
                <Checkbox>是否发送手机短信</Checkbox>
              )
            }
          </FormItem>
          <FormItem
            label='发送类型'
            {...formItemLayout}
          >
            {
              getFieldDecorator('type', {
                initialValue: !isEmpty(record.type) ? `${record.type}` : undefined,
                rules: [
                  { required: true, message: '发送类型不能为空' }
                ]
              })(
                <Select
                  placeholder='请选择发送类型'
                  onChange={(type) => { this.setState({ type }); }}
                >
                  {
                  Object.keys(MESSAGETYPE).map((item, key) => 
                    <Option value={item} key={item}>{MESSAGETYPE[item].name}</Option>)
                  }
                </Select>
              )
            }
          </FormItem>
          {
            type === TYPEKEY.user &&
            <FormItem
              label='用户名称'
              {...formItemLayout}
            >
              {
              getFieldDecorator('revIds', {
                initialValue: [],
                rules: [
                  { required: true, message: '请选择用户' }
                ]
              })(
                <AutoSearchMult {...userProps} />
              )
            }
            </FormItem>
          }
          {
            type === TYPEKEY.company &&
            <FormItem
              label='公司名称'
              {...formItemLayout}
            >
              {
              getFieldDecorator('revIds', {
                initialValue: '',
                rules: [
                  { required: true, message: '请选择公司名称' }
                ]
              })(
                <AutoSearchMult {...companyProps} />
              )
            }
            </FormItem>
          }
          <FormItem
            label='内容'
            {...formItemLayout}
          >
            {
              getFieldDecorator('content', {
                initialValue: details.content || '',
                rules: [{ required: true, message: '请填写内容' }]
              })(
                <TextArea
                  maxLength={200}
                  placeholder='内容'
                />
              )
            }
          </FormItem>
        </Form>
      </Modal>
    );
  }
}

export default Form.create()(AddModal);
